<!-- 创建时间: 2019年10月26日 星期六 01:12 -->
<template>
  <div class="app_container mui-fullscreen">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <h1 class="mui-title">立方库智能停车系统</h1>
      <a
        class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"
        @click.prevent="navbarMenu"
      ></a>
      <!--  -->
      <button
        class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"
        v-show="$route.path == '/' ? false : true"
        style="touch-action: none; color: white;"
      >
        <span class="mui-icon mui-icon-left-nav"></span>返回
      </button>
    </header>

    <!-- 主界面菜单 -->
    <div class="rightnavbar" ref="rightnavbar">
      <div class="header">
        <div class="text-left">
          车主 {{ userName ? userName : "未登录" }} 你好
        </div>
        <i class="fa fa-toggle-on text-right" ref="navbarCloseBtn"></i>
      </div>
      <div class="loginTime">
        <span>登录时间: {{ loginTime ? loginTime : "--" }}</span>
      </div>
      <div class="userPhoto">
        <img :src="offnavbarPhoto" />
      </div>
      <div class="list">
        <ul class="mui-table-view" ref="liEvent">
          <router-link tag="li" to="/" class="mui-table-view-cell">
            <i class="fa fa-home" aria-hidden="true"></i>首页
          </router-link>
          <router-link
            tag="li"
            to="/PersonalPage"
            class="mui-table-view-cell"
            v-if="userName && loginTime"
          >
            <i class="fa fa-align-center" aria-hidden="true"></i>个人中心
          </router-link>
          <router-link
            tag="li"
            :to="{
              path: '/PersonalPage/OpenMember',
              query: { redirect: this.$route.path },
            }"
            class="mui-table-view-cell"
            v-if="userName && loginTime"
          >
            <i class="fa fa-user-md" aria-hidden="true"></i>
            {{ grde == 0 ? "开通会员" : "会员充值" }}
          </router-link>
          <router-link
            tag="li"
            to="/BookingInfo"
            class="mui-table-view-cell"
            v-if="userName && loginTime"
          >
            <i class="fa fa-clock-o" aria-hidden="true"></i>我的预约
          </router-link>
          <li
            class="mui-table-view-cell"
            @click="logOut"
            v-if="userName && loginTime"
          >
            <i class="fa fa-sign-out" aria-hidden="true"></i>退出登录
          </li>
          <router-link
            tag="li"
            to="/LoginPage"
            class="mui-table-view-cell"
            v-if="!userName && !loginTime"
          >
            <i class="fa fa-sign-in" aria-hidden="true"></i>登录/注册
          </router-link>
          <router-link to="/About" tag="li" class="mui-table-view-cell">
            <i class="fa fa-info" aria-hidden="true"></i>关于
          </router-link>
        </ul>
      </div>
    </div>
    <!-- 主界面蒙板 -->
    <div class="mask" ref="mask"></div>

    <!-- 主界面具体展示内容 -->
    <transition mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import mui from "./lib/MUI/dist/js/mui.js";
import error from "./js/error";
const Base64 = require("js-base64").Base64;
import { Lazyload } from "mint-ui";
import readPhoto from "./js/readPhoto.js";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // 用户名
      userName: "",
      // 登录时间
      loginTime: "",
      // 等级
      grde: "",
      // 侧滑菜单头像
      offnavbarPhoto: this.$store.getters.getUserPhoto,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 页面回滚
    go() {
      this.$router.go(-1);
    },
    // 测滑菜单动画
    navbarMenu() {
      // 获取用户名
      this.$options.methods.getNavbarInfo(this);

      // 设置显示头像
      this.offnavbarPhoto = this.$store.getters.getUserPhoto;

      this.$refs.rightnavbar.style.transition = "all 1s";
      this.$refs.rightnavbar.style.transform = "translateX(-100%)";

      var _this = this;

      setTimeout(() => {
        _this.$refs.mask.style.display = "block";
        var o = 0;
        var __this = _this;
        var dt = setInterval(() => {
          __this.$refs.mask.style.opacity = o += 0.1;
          if (o > 0.4) {
            clearInterval(dt);
          }
        }, 50);
      }, 200);

      this.$refs.navbarCloseBtn.classList = "fa fa-toggle-on text-right";

      this.$refs.mask.onclick = function name(params) {
        setTimeout(() => {
          _this.$refs.mask.style.display = "none";
          _this.$refs.mask.style.opacity = "0";

          _this.$refs.rightnavbar.style.transition = "all 1s";
          _this.$refs.rightnavbar.style.transform = "translateX(100%)";
        }, 200);
      };
      this.$refs.navbarCloseBtn.onclick = function() {
        this.classList = "fa fa-toggle-off text-right";
        _this.$refs.mask.onclick();
      };

      this.$refs.liEvent.onclick = function() {
        _this.$refs.mask.onclick();
      };
    },
    // 获取用户名 和 登录时间
    getNavbarInfo(_this) {
      var to = sessionStorage.getItem("cubelibrarytoken");
      if (to != null) {
        var name = to.substring(to.indexOf("_") + 1, to.length);
        _this.userName = Base64.decode(name);

        _this.$http.post("getLoginTime").then(
          (response) => {
            _this.loginTime = response.body[0];
            _this.grde = parseInt(response.body[1]);
          },
          (response) => {
            error(response.status, _this);
          }
        );
      }
    },
    // 退出登录
    logOut() {
      this.$http.get("logOut");
      sessionStorage.removeItem("cubelibrarytoken");
      this.userName = this.loginTime = "";
      if (this.$route.path != "/") {
        this.$router.push("/");
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    readPhoto(this);
    //this.setPublicUserPhoto();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
@import url("./scss/transition.scss");
@import url("./lib/Font-Awesome-master/css/font-awesome.min.css");

.app_container {
  header {
    background: #16bff5;

    a {
      text-decoration: none;
      color: white;
      font-weight: bold;
    }
  }

  .rightnavbar,
  .mask {
    height: 100%;
    width: 70%;
    position: fixed;
    top: 0;
    left: 100%;
    bottom: 0;
    z-index: 11;
    background-color: #333;
    opacity: 0.9;
    border-radius: 10px 0px 0px 10px;
    color: white;

    .header {
      padding: 0 10px;
      display: flex;
      justify-content: space-between;

      .text-left {
        font-size: 17px;
        padding: 8px 0px;
      }

      .text-right {
        font-size: 30px;
        padding: 5px 0px;
        color: lightgreen;
      }
    }

    .loginTime {
      span {
        padding: 0px 10px;
      }
    }

    .userPhoto {
      text-align: center;
      margin: 10px 0px;

      img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
      }

      img[lazy="loading"] {
        width: 120px;
        height: 120px;
        margin: auto;
      }
    }

    .list {
      margin-top: 30px;

      ul {
        li {
          background: #ec8f29;
          margin: 10px 0px;
          border-radius: 15px;
          font-size: 16px;
          color: white;
          font-weight: bold;
          transition: all 0.5s;
          font-family: serif;
          letter-spacing: 4px;
        }

        li:hover {
          transform: translateX(30px);
        }
      }
    }
  }

  .mask {
    width: 100%;
    left: 0;
    z-index: 10;
    opacity: 0;
    display: none;
    border-radius: 0;
  }
}

.mui-table-view {
  background-color: #333;
}

.mui-table-view:before,
.mui-table-view::after {
  height: 0;
}

.mui-table-view-cell:after {
  left: 0;
  height: 0;
}

.mui-table-view-cell.mui-active {
  background-color: #fff !important;
}
</style>
